const data = {
  intro: {
    title: "图解 QUIC 连接",
    subtitle: "对每一个字节的解释和再现",
    desc: "QUIC 是一个基于 UDP 的安全流协议，构成了 HTTP/3 的基础。",
    intro:
      '在这个演示中，客户端通过 TLS 加密协商 QUIC 协议连接服务器。客户端发送"ping"、接收"pong"后终止连接。点击下面开始探索。',
  },
  sections: [
    {
      type: "RecOuter",
      tags: ["calculation", "client"],
      label: "客户端准备密钥交换",
      illustration: {
        src: "https://quic.xargs.org/images/key1.png",
        width: "135",
        height: "250",
      },
      json: () => import("./clientKeyExchangeGeneration.json"),
    },
    {
      type: "RecOuter",
      tags: ["calculation", "client"],
      label: "客户端生成初始密钥",
      illustration: {
        src: "https://quic.xargs.org/images/key2.png",
        width: "135",
        height: "250",
      },
      json: () => import("./clientInitialKeysCalc.json"),
    },
    {
      type: "Datagram",
      datagram: 3,
      label: "UDP 数据报 01 - ClientHello",
    },
    {
      type: "RecOuter",
      tags: ["record", "client"],
      label: "客户端初始数据包",
      json: () => import("./clientInitialPacket.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "client", "embedded"],
      label: "TLS: ClientHello",
      json: () => import("./tls-clientHello.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "client"],
      label: "长度填充/对齐",
      json: () => import("./padding.json"),
    },
    {
      type: "RecOuter",
      tags: ["calculation", "server"],
      label: "服务器端准备密钥交换",
      illustration: {
        src: "https://quic.xargs.org/images/key3.png",
        width: "135",
        height: "250",
      },
      json: () => import("./serverKeyExchangeGeneration.json"),
    },
    {
      type: "RecOuter",
      tags: ["calculation", "server"],
      label: "服务器端生成初始密钥",
      illustration: {
        src: "https://quic.xargs.org/images/key4.png",
        width: "135",
        height: "250",
      },
      json: () => import("./serverInitialKeysCalc.json"),
    },
    {
      type: "Datagram",
      datagram: 6,
      label: "UDP 数据报 02 - ServerHello + 服务器发起握手",
    },
    {
      type: "RecOuter",
      tags: ["record", "server"],
      label: "服务器端初始数据包",
      json: () => import("./serverInitialPacket.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "server", "embedded"],
      label: "TLS: ServerHello",
      json: () => import("./tls-serverHello.json"),
    },
    {
      type: "RecOuter",
      tags: ["calculation", "server"],
      label: "服务器端生成握手密钥",
      illustration: {
        src: "https://quic.xargs.org/images/key5.png",
        width: "135",
        height: "250",
      },
      json: () => import("./serverHandshakeKeysCalc.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "server"],
      label: "服务器端握手数据包",
      json: () => import("./serverHandshakePacket1.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "server", "embedded"],
      label: "TLS: TLS 记录的加密的扩展",
      json: () => import("./tls-encryptedExtensions.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "server", "embedded"],
      label: "TLS: TLS 记录证书",
      json: () => import("./tls-certificate.json"),
    },
    {
      type: "Datagram",
      datagram: 3,
      label: "UDP 数据报 03 - 服务器第二个握手包(服务器握手过程完成)",
    },
    {
      type: "RecOuter",
      tags: ["record", "server"],
      label: "服务器端握手数据包",
      id: "serverHandshake2",
      json: () => import("./serverHandshakePacket2.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "server", "embedded"],
      label: "TLS: 证书验证数据",
      json: () => import("./tls-certificateVerify.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "server", "embedded"],
      label: "TLS: 握手完成",
      json: () => import("./serverTLSHandshakeFinished.json"),
    },
    {
      type: "RecOuter",
      tags: ["calculation", "client"],
      label: "客户端生成握手密钥",
      illustration: {
        src: "https://quic.xargs.org/images/key6.png",
        width: "135",
        height: "250",
      },
      json: () => import("./clientHandshakeKeysCalc.json"),
    },
    {
      type: "Datagram",
      datagram: 3,
      label: "UDP 数据报 04 - Ack",
    },
    {
      type: "RecOuter",
      tags: ["record", "client"],
      label: "客户端 Ack",
      json: () => import("./clientAck.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "client"],
      label: "客户端握手数据包",
      json: () => import("./clientHandshake1.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "client"],
      label: "长度填充/对齐",
      id: "padding2",
      json: () => import("./padding.json"),
    },
    {
      type: "RecOuter",
      tags: ["calculation", "server"],
      label: "服务器端生成会话密钥(application keys)",
      illustration: {
        src: "https://quic.xargs.org/images/key7.png",
        width: "116",
        height: "250",
      },
      json: () => import("./serverApplicationKeysCalc.json"),
    },
    {
      type: "RecOuter",
      tags: ["calculation", "client"],
      label: "客户端生成会话密钥(application keys)",
      illustration: {
        src: "https://quic.xargs.org/images/key8.png",
        width: "97",
        height: "250",
      },
      json: () => import("./clientApplicationKeysCalc.json"),
    },
    {
      type: "Datagram",
      datagram: 3,
      label: 'UDP 数据报 05 - 客户端握手完成，客户端开始 "ping"',
    },
    {
      type: "RecOuter",
      tags: ["record", "client"],
      label: "客户端握手数据包",
      id: "clientHandshake2",
      json: () => import("./clientHandshake2.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "client", "embedded"],
      label: "TLS: 握手完成",
      id: "tls-handshakeFinishedClient",
      json: () => import("./clientTLSHandshakeFinished.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "client"],
      label: "客户端会话包",
      json: () => import("./clientApplicationPacket1.json"),
    },
    {
      type: "Datagram",
      datagram: 2,
      label: 'UDP 数据报 06 - 服务器端握手完成，服务器端发送 "pong" 响应',
    },
    {
      type: "RecOuter",
      tags: ["record", "server"],
      label: "服务器端握手 ACK 数据包",
      id: "serverHandshake3",
      json: () => import("./serverHandshakePacket3.json"),
    },
    {
      type: "RecOuter",
      tags: ["record", "server"],
      label: "服务器端会话包",
      json: () => import("./serverApplicationPacket1.json"),
    },
    {
      type: "Datagram",
      datagram: 1,
      label: 'UDP 数据报 07 - 客户端收到 "pong"(ACK)，并停止响应',
    },
    {
      type: "RecOuter",
      tags: ["record", "client"],
      label: "客户端会话包",
      id: "clientApplicationPacket2",
      json: () => import("./clientApplicationPacket2.json"),
    },
    {
      type: "Datagram",
      datagram: 1,
      label: "UDP 数据报 08 - 连接关闭",
    },
    {
      type: "RecOuter",
      tags: ["record", "server"],
      label: "服务器端会话包",
      id: "serverApplicationPacket2",
      json: () => import("./serverApplicationPacket2.json"),
    },
  ],
  ending: {
    mother: "https://quic.xargs.org/",
    desc: "你可能也对 <a href='/illustrate/tls13' target='_blank'>TLS 1.3</a> 的内容感兴趣。",
  },
};

export default data;
